<template>
  <div class="back-top iconfont pointer icon-fanhuidingbu" @click="handleBackTop"></div>
</template>

<script>
export default {
  name: "BacktopComponents",
  props: {
    animated: {
      type: Boolean,
      default: true,
      info: "是否启用动画"
    }
  },
  methods: {
    handleBackTop() {
      let app = document.getElementById("__nuxt"),
        isAnimate = this.animated,
        time = null;

      // 是否启用动画
      if (isAnimate) {
        let sctp = document.documentElement.scrollTop || document.body.scrollTop;

        // 是否到了顶部
        time = setInterval(() => {
          sctp = document.documentElement.scrollTop || document.body.scrollTop;

          if (sctp <= 0) {
            clearTimeout(time);
            time = null;
            return false;
          }

          window.scrollTo(0, sctp - sctp / 8);
        }, 10);
      } else {
        app.scrollIntoView();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.back-top {
  position: fixed;
  right: 50px;
  bottom: 50px;
  font-size: 50px;
  color: var(--theme);
}
</style>